import React, { useState, FC } from 'react';
import { Table, Button, Popconfirm, message } from 'antd';
import { Plane } from '../../../types/plane.type';
import { PlaneSchedulingModal } from './PlaneSchedulingModal';
import { deletePlane } from '@apis/index';
type Props = {
    data?: Plane[];
    loading: boolean;
    setOpen: (open: boolean) => void;
    selectedPlane?: Plane;
    setSelectedPlane: (plane: Plane) => void;
    handleGetAllPlane: () => void;
}
export const PlaneTable: FC<Props> = ({ data, loading, setOpen, selectedPlane, setSelectedPlane, handleGetAllPlane }) => {
    const [show, setShow] = useState(false);

    const confirm = () => {
        if (selectedPlane) {
            deletePlane(selectedPlane).then(data => {
                if (data) {
                    handleGetAllPlane();
                } else {
                    message.error("Delete fail!")
                }
            })
        }
    }

    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'color',
            dataIndex: 'color',
            key: 'color',
        },
        {
            title: 'description',
            dataIndex: 'description',
            key: 'description',
        },
        {
            title: 'status',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: 'Action',
            dataIndex: '',
            key: 'x',
            render: (record: Plane) => {
                return <>
                    <Button onClick={() => {
                        setSelectedPlane(record);
                        setOpen(true);
                    }}>Edit</Button>
                    <Button style={{ marginLeft: 10 }} onClick={() => {
                        setSelectedPlane(record);
                        setShow(true);
                    }}>Scheduling</Button>
                    <Popconfirm
                        title="Delete the task"
                        description="Are you sure to delete this task?"
                        onConfirm={confirm}
                        // onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    ><Button danger style={{ marginLeft: 10 }} onClick={() => {
                        setSelectedPlane(record);
                    }}>Delete</Button></Popconfirm>
                </>
            },
        },
    ];
    return <>
        <Table loading={loading} columns={columns} dataSource={data} rowKey={record => record.id!} />
        {show && <PlaneSchedulingModal selectedPlane={selectedPlane} show={show} onCancel={() => setShow(false)} onOk={() => setShow(false)} />}
    </>
}